<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://xmlns.jcp.org/jsf/html"
	xmlns:f="http://xmlns.jcp.org/jsf/core"
	xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
	xmlns:c="http://xmlns.jcp.org/jsf/composite"
	xmlns:p="http://primefaces.org/ui">

<ui:decorate template="/jsp/WEB/pageLayout.xhtml">
	<ui:define name="centro">
		<h:form id="form">
	
			<p:panel id="ListEntrada" header="Listagem Entrada e Saída de Clientes por Hora">

				<f:facet name="actions">
					<h:commandLink
						styleClass="ui-panel-titlebar-icon ui-corner-all ui-state-default">
						<h:outputText styleClass="ui-icon ui-icon-print" title="Imprimir" />
						<p:printer target="data" />
					</h:commandLink>

					<h:commandLink
						styleClass="ui-panel-titlebar-icon ui-corner-all ui-state-default"
						style="width:16px;heigh:16px;">
						<p:graphicImage style=" margin-top:1px;margin-left:2px"
							title="Exportar relatório para excel" url="/imagens/ui-xls.png"></p:graphicImage>
						<p:dataExporter type="xls" target="data"
							fileName="Listagem de entrada de clientes" />
					</h:commandLink>

				</f:facet>
				<br />
				
				<h:panelGrid columns="6">
					<!-- script para o calendário BR -->
					<h:outputScript name="calendario_pt_BR.js" library="js" />
					<p:outputLabel for="date" value="Data:" />
					<p:calendar id="date" value="#{RelatorioEntradaClientesBean.date}"
						pattern="dd/MM/yyyy" locale="pt_BR"
						title="Campo obrigatório. Informe a data" />
					<p:commandButton id="searchButton" icon="ui-icon-search"
						update="@form" ajax="false" title="Pesquisar"
						actionListener="#{RelatorioEntradaClientesBean.exibirRelatorioEntrada()}" />
				</h:panelGrid>
								
				<p:dataTable id="data" var="clientes" value="#{RelatorioEntradaClientesBean.listaClientes}"  
                 emptyMessage="Nenhum cliente encontrado!" style="margin-top:20px; position: auto" 
                 	paginator="true" > 
 
			        <p:column style="width: 50px;" sortBy="horaCriacao"> 
			        	<f:facet name="header">Horário</f:facet>
			        	<h:outputText value="#{clientes.date}" /> 
			        </p:column>
		        					
					<p:column style="width: 50px; text-align:center" sortBy="qtde">
						<f:facet name="header">Total de Entrada</f:facet>
						<h:outputText value="#{clientes.qtdeEntrada}" />
					</p:column>
					
					<p:column style="width: 50px; text-align:center" sortBy="qtde">
						<f:facet name="header">Total de Saida</f:facet>
						<h:outputText value="#{clientes.qtdeSaida}" />
					</p:column>
			
    			</p:dataTable>
				
			</p:panel>

		</h:form>
	</ui:define>
</ui:decorate>

</html>